import React from 'react'

class Login extends React.Component {
  // 状态 简写为以下形式
  state = {
    // 只读
    value: '', // state 只读属性
    list: [],
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={(e) => {
            this.setState({
              value: e.target.value,
            })
          }}
        />

        <button
          onClick={() => {
            console.log(this.state.value, 'value')
            // this.state.list.push(this.state.value);
            this.setState({
              list: [...this.state.list, this.state.value],
              value: '',
            })
          }}
        >
          提交
        </button>

        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                onClick={() => {
                  // 1. state的数据，最好不要直接操作
                  let arr = [...this.state.list]
                  arr.splice(index, 1)
                  // console.log(arr, 'arr')
                  this.setState({
                    list: arr,
                  })
                }}
                key={index}
              >
                {item}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default Login
